প্যারালাক্স স্ক্রলিং এর মূল ধারণা হলো ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য সৃষ্টি করা, যা ওয়েবপেজে গভীরতা এবং ত্রিমাত্রিক (3D) ইফেক্ট তৈরি করে। এই ইফেক্টে একাধিক লেয়ার থাকে, এবং প্রতিটি লেয়ারের স্ক্রল স্পিড আলাদা হতে পারে। এর মাধ্যমে সাইটে একটি ডাইনামিক, আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অনুভূতি তৈরি হয়।
Layers এর জন্য বিভিন্ন Scroll Speed সেট করার পদ্ধতি
প্যারালাক্স স্ক্রলিংয়ে বিভিন্ন লেয়ারের জন্য আলাদা স্ক্রল স্পিড সেট করা হয় যাতে ব্যাকগ্রাউন্ড এবং কন্টেন্ট ভিন্ন গতিতে স্ক্রল করে। এটি JavaScript অথবা jQuery এর মাধ্যমে কনফিগার করা যায়।
উদাহরণ: একাধিক লেয়ার জন্য ভিন্ন স্ক্রল স্পিড
ধরা যাক, আমাদের একটি সাইট রয়েছে যেখানে একাধিক লেয়ার ব্যবহার করা হয়েছে, যেমন:
- ব্যাকগ্রাউন্ড লেয়ার (slow scrolling)
- ফ্রন্ট কন্টেন্ট লেয়ার (fast scrolling)
আমরা JavaScript এর মাধ্যমে এই লেয়ারগুলির জন্য আলাদা স্ক্রল স্পিড সেট করতে পারব।
১. HTML স্ট্রাকচার
প্রথমে, আমাদের HTML ফাইলে একাধিক লেয়ার তৈরি করতে হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Scroll Speeds</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-layer" id="layer1"></div> <!-- Background Layer -->
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>Scroll down to see the effect with different scroll speeds for layers.</p>
</div>
<div class="parallax-layer" id="layer2"></div> <!-- Middle Layer -->
<div class="content">
<h2>Enjoy the experience!</h2>
</div>
<div class="parallax-layer" id="layer3"></div> <!-- Front Layer -->
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং
এখন, আমাদের CSS ফাইলে লেয়ারগুলির জন্য ডিজাইন এবং পজিশনিং কনফিগার করতে হবে:
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax-layer {
position: fixed;
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#layer1 {
background-image: url('your-background-image.jpg'); /* Background Image */
z-index: -2; /* Set layer below other content */
}
#layer2 {
background-image: url('your-second-image.jpg'); /* Middle Layer Image */
z-index: -1; /* Middle layer */
}
#layer3 {
background-image: url('your-third-image.jpg'); /* Front Layer Image */
z-index: 1; /* Front layer */
}
.content {
text-align: center;
padding: 40px;
background-color: white;
z-index: 2;
}
এখানে তিনটি প্যারালাক্স লেয়ার ব্যবহার করা হয়েছে এবং প্রত্যেকটি লেয়ারের জন্য আলাদা ব্যাকগ্রাউন্ড ইমেজ যোগ করা হয়েছে। z-index প্রপার্টি ব্যবহার করে লেয়ারগুলিকে উপরে বা নিচে সাজানো হয়েছে।
৩. JavaScript এর মাধ্যমে বিভিন্ন Scroll Speed সেট করা
এখন, JavaScript কোডের মাধ্যমে প্রতিটি লেয়ারের জন্য আলাদা স্ক্রল স্পিড সেট করা হবে।
// script.js
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
// Background Layer (Slow Scroll)
var layer1 = document.getElementById('layer1');
layer1.style.backgroundPosition = 'center ' + (scrollPosition * 0.3) + 'px';
// Middle Layer (Medium Scroll)
var layer2 = document.getElementById('layer2');
layer2.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
// Front Layer (Fast Scroll)
var layer3 = document.getElementById('layer3');
layer3.style.backgroundPosition = 'center ' + (scrollPosition * 0.7) + 'px';
});
ব্যাখ্যা:
- scrollY:
window.scrollYস্ক্রল পজিশন ট্র্যাক করে, অর্থাৎ স্ক্রল কতটা নিচে গিয়েছে তা মাপতে সহায়তা করে। - Scroll Speed:
scrollPosition * 0.3,scrollPosition * 0.5, এবংscrollPosition * 0.7বিভিন্ন লেয়ারের স্ক্রল স্পিড কন্ট্রোল করে। এই সংখ্যাগুলির মাধ্যমে, ব্যাকগ্রাউন্ড লেয়ারটি ধীরে স্ক্রল হবে, মিডল লেয়ারটি একটু দ্রুত এবং ফ্রন্ট লেয়ারটি আরও দ্রুত স্ক্রল হবে।
৪. পর্যালোচনা
- ব্যাকগ্রাউন্ড লেয়ার (Layer1): এটি খুব ধীরে স্ক্রল হবে, কারণ আমরা এর জন্য স্ক্রল স্পিড 0.3 দিয়েছি।
- মিডল লেয়ার (Layer2): এটি একটু দ্রুত স্ক্রল হবে, কারণ স্ক্রল স্পিড 0.5।
- ফ্রন্ট লেয়ার (Layer3): এটি দ্রুত স্ক্রল হবে, কারণ স্ক্রল স্পিড 0.7।
৫. পারফরম্যান্স টিপস
- যদি অনেক লেয়ার এবং ভারী গ্রাফিক্স থাকে, তবে পারফরম্যান্স ইস্যু হতে পারে। এতে requestAnimationFrame() ব্যবহার করা যেতে পারে, যা স্ক্রল ইভেন্টের জন্য অ্যানিমেশনকে মসৃণভাবে রেন্ডার করতে সাহায্য করবে।
window.addEventListener('scroll', function() {
window.requestAnimationFrame(function() {
var scrollPosition = window.scrollY;
var layer1 = document.getElementById('layer1');
layer1.style.backgroundPosition = 'center ' + (scrollPosition * 0.3) + 'px';
var layer2 = document.getElementById('layer2');
layer2.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
var layer3 = document.getElementById('layer3');
layer3.style.backgroundPosition = 'center ' + (scrollPosition * 0.7) + 'px';
});
});
সারাংশ
প্যারালাক্স স্ক্রলিংয়ে Layers এর জন্য বিভিন্ন Scroll Speed সেট করা একটি শক্তিশালী উপায় যা ওয়েবপেজে গভীরতা এবং ডাইনামিক ইফেক্ট তৈরি করে। JavaScript ব্যবহার করে, আপনি বিভিন্ন লেয়ারগুলির জন্য আলাদা স্ক্রল স্পিড নিয়ন্ত্রণ করতে পারেন, যা ব্যবহারকারীদের জন্য একটি চিত্তাকর্ষক এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে।
Read more
